
<template>
  <div v-if='filmInfo' class='detail'>
    <!--详情页面的头部-->
    <!-- <div class="detail-title" v-title>
      <i class='iconfont icon-xiangzuo'></i>
      <span>{{filmInfo.name}}</span>
    </div> -->
    <mz-title :name='filmInfo.name' v-title @change='back'></mz-title>

    <div class='detail-img'>
      <img :src="filmInfo.poster" alt="">
    </div>
    <div class="detail-content">
      <h4>{{filmInfo.name}}</h4>
      <p>{{filmInfo.category}}</p>
      <p>{{filmInfo.premiereAt |  fDate}}上映</p>
      <p>{{filmInfo.nation}} | {{filmInfo.runtime}}分钟</p>
      <div :class='{active:flag}' :style='{overflow:"hidden",transition:"height 1s ease",height:height+"px"}'>
        <p id='synopsis'>{{filmInfo.synopsis}}</p>
      </div>
      <p class='icon' @click='flag=!flag'><i class='iconfont' :class='flag?"icon-xiangxia":"icon-xiangshang"'></i></p>
    </div>
    <div class="actor-swiper">
      <h3 style='text-align:left'>演职人员</h3>
      <SwiperComp cName='actor'>
        <div v-for='actor in filmInfo.actors' :key='actor.name' class="swiper-slide">
          <div class="actor-img"><img :src="actor.avatarAddress" alt=""></div>
          <div class="actor-name">{{actor.name}}</div>
        </div>
      </SwiperComp>
    </div>
    <div class="photo-swiper">
      <h3 style='text-align:left' @click='isShow=true'>剧照</h3>
      <SwiperComp cName='photo'>
        <div @click='clickPhotoImg(index)' v-for='(photo,index) in filmInfo.photos' :key='photo' class="swiper-slide">
          <div class="photo-img"><img :src="photo" alt=""></div>
        </div>
      </SwiperComp>
    </div>
    <!--调用Photos组件-->
    <Photos @trigger='clickPhotoImg' v-show='isShow' :photos='filmInfo.photos'>
      <mz-title name='剧照（5）' @change='back2'></mz-title>
    </Photos>
  </div>
</template>

<script>
/* eslint-disable no-new */
import { instance } from '@/utils/http'
import moment from 'moment'
import SwiperComp from '@/components/swiperComp'
import Swiper from 'swiper'
import Photos from './detail/photos.vue'
import { ImagePreview } from 'vant'
export default {
  components: {
    SwiperComp,
    Photos
  },
  methods: {
    clickPhotoImg(index) {
      ImagePreview({
        images: this.filmInfo.photos,
        startPosition: index,
        closeable: true, // 显示关闭按钮
        closeIconPosition: 'top-left',
        closeIcon: 'https://img1.baidu.com/it/u=646065157,2797704287&fm=253&fmt=auto&app=138&f=JPEG?w=498&h=500'
      })
    },
    back() {
      this.$router.back()
    },
    back2() {
      this.isShow = false
    }
  },
  data() {
    return {
      filmInfo: null,
      flag: true,
      height: 0,
      isShow: false
    }
  },
  filters: {
    fDate(time) {
      return moment(time * 1000).format('YYYY-MM-DD')
    }
  },
  async created() {
    const res = await instance.get('/gateway?filmId=' + this.$route.params.id + '&k=6948128', {
      headers: {
        'X-Host': 'mall.film-ticket.film.info'
      }
    })
    this.filmInfo = res.data.data.film
    this.$nextTick(() => {
      this.height = document.getElementById('synopsis').offsetHeight
      // 实例化演员轮播图
      new Swiper('.actor', {
        slidesPerView: 4,
        spaceBetween: 30
      })
      new Swiper('.photo', {
        slidesPerView: 2.4,
        spaceBetween: 4
      })
    })
  }
}
</script>

<style lang='scss' scoped>
  .photo-img{
    img{
      width:1.5rem;
      height:1rem;
    }
  }
  .actor-swiper,.photo-swiper{
    background: #fff;
    padding: 10px 0 10px 10px;
    text-align: center;
  }
  .actor-img{
    width:.85rem;
    height:.85rem;
    position: relative;
    overflow: hidden;
    img{
      position: absolute;
      width:.85rem;
      top:-16px;
    }
  }
  .active{
    height:38px!important;
  }
  .icon{
    position: relative;
    i{
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .detail-img{
    width:100%;
    height:2.1rem;
    position: relative;
    overflow: hidden;
    img{
      width:100%;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .detail-content{
    padding: .15rem;
    line-height: .2rem;
  }
</style>
